<script setup lang="ts">
import { baseURL } from '@/api/_client.ts';
import { getProjectDynamicById } from '@/api/agriculture.ts';
import router from '@/router';
import { HomeOutlined } from '@ant-design/icons-vue';
import { useRoute } from 'vue-router';

// 面包屑
const breadcrumb = [
  { label: '首页', path: '/' },
  { label: '项目概况', path: '/agriculture/ProjectView' },
];

const route = useRoute();
const items = ref<any>({});
const loading = ref<boolean>(false);

const fetchItem = async (id: string) => {
  loading.value = true;

  const res = await getProjectDynamicById(id);
  const { data } = res;

  // 假设 data.attributes 是包含详细信息的对象
  const attributes = data.attributes;
  const imageUrl = attributes.image?.data?.attributes?.url;

  items.value = {
    title: attributes.title,
    time: attributes.time,
    Area: attributes.Area,
    imageUrl: baseURL + `${imageUrl}`,
    descriptionOne: attributes.descriptionOne,
    descriptionTwo: attributes.descriptionTwo,
  };
  loading.value = false;
};

onMounted(() => {
  const id = route.params.id as string;
  fetchItem(id);
});

// 返回上一页
const goBack = () => {
  router.back();
};
</script>

<template>
  <div class="mb-12 mt-5 flex flex-col">
    <!-- 表头工具栏 -->
    <div class="flex h-14 items-center justify-between gap-2 bg-white px-6">
      <div class="flex grow-[1] items-center gap-2">
        <HomeOutlined />
        <span class="">当前位置:</span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index" :to="item.path">
            {{ item.label }}
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            {{ items.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="flex items-center gap-2">
        <span class="ml-4 cursor-pointer" @click="goBack"> 【返回上一页】 </span>
      </div>
    </div>

    <!-- 表格 -->
    <div v-loading="loading" class="table-shadow mt-4 min-h-[800px] bg-white p-4">
      <!-- 标题栏 -->
      <div class="mb-6 border-b-4 border-green-600 bg-white">
        <div class="inline-block bg-green-600 px-6 py-3">
          <span class="text-xl font-bold text-white">项目概况</span>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="bg-white px-8 py-6">
        <!-- 项目标题和时间 -->
        <div class="mb-8 border-b border-gray-200 pb-6 text-center">
          <h1 class="mb-3 text-3xl font-bold text-gray-800">{{ items.title }}</h1>
          <div
            v-if="items.time && items.time.trim()"
            class="inline-flex items-center text-gray-600"
          >
            <svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
              ></path>
            </svg>
            <span class="font-medium">时间：{{ items.time }}</span>
          </div>
          <div v-else class="text-sm text-gray-400">时间待定</div>
        </div>

        <!-- 图片展示 -->
        <div class="mb-8">
          <div class="flex min-h-[400px] items-center justify-center rounded-lg bg-gray-50 p-6">
            <el-image
              class="mx-auto w-full max-w-4xl rounded-lg shadow-sm"
              :src="items.imageUrl"
              :preview-src-list="[items.imageUrl]"
              :alt="items.title + ' Image'"
              fit="contain"
            >
              <template #error>
                <div class="flex h-96 flex-col items-center justify-center text-gray-400">
                  <svg class="mb-3 h-16 w-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                    ></path>
                  </svg>
                  <span>图片加载失败</span>
                </div>
              </template>
            </el-image>
          </div>
        </div>

        <!-- 内容描述 -->
        <div class="space-y-6">
          <div class="mb-4 flex items-center">
            <div class="mr-3 h-6 w-1 bg-green-600"></div>
            <h2 class="text-xl font-semibold text-gray-800">内容讲解</h2>
          </div>

          <div
            v-if="items.descriptionOne && items.descriptionOne.trim()"
            class="rounded-r-lg border-l-4 border-green-500 bg-green-50 p-4"
          >
            <p class="description leading-relaxed text-gray-700">{{ items.descriptionOne }}</p>
          </div>
          <div
            v-if="items.descriptionTwo && items.descriptionTwo.trim()"
            class="rounded-r-lg border-l-4 border-blue-500 bg-blue-50 p-4"
          >
            <p class="description leading-relaxed text-gray-700">{{ items.descriptionTwo }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.table-shadow {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.description {
  text-indent: 2em; /* 首行缩进 */
  line-height: 1.8em; /* 行高 */
  color: #444; /* 更深的颜色 */
  font-size: 1.1em; /* 适中的字体大小 */
}
</style>
